<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     *{margin:0;padding:0;}
       img{
           width:230px;
         padding:5px; 
           vertical-align: bottom;
       }
       .content{
           width:240px;
           box-shadow: 0 0 1px 1px rgba(51,51,51,0.1);
           float: left;
           position: relative;
       }
         #container{
             /* overflow: hidden; */
             position: relative; 
             margin-left: auto;
             margin-right: auto;
         }
    </style>
</head>
<body>
    <div id="container">
        <div class="content">
            <img src="images/01.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/02.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/03.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/04.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/05.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/06.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/07.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/08.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/09.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/10.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/11.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/12.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/01.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/02.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/03.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/07.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/08.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/09.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/10.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/11.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/12.jpg" alt="">
        </div>
        <div class="content">
            <img src="images/01.jpg" alt="">
        </div>
    </div>
    <script>
    window.onload = function () {
        var url = {
            dataUrl: [{
                src: "01.jpg"
            }, {
                src: "02.jpg"
            }, {
                src: "03.jpg"
            }, {
                src: "04.jpg"
            }, {
                src: "05.jpg"
            }, {
                src: "06.jpg"
            }, {
                src: "07.jpg"
            }, {
                src: "08.jpg"
            }, {
                src: "09.jpg"
            }, {
                src: "10.jpg"
            }, {
                src: "11.jpg"
            }, {
                src: "12.jpg"
            }]
        }
        var container=document.getElementById("container");
        var contents=document.getElementsByClassName("content");
        var data=url.dataUrl;
        placeImg();
        window.onscroll=function(){
            if(sCondition()){
                for(let i=0;i<data.length;i++){
                    let img=document.createElement("img");
                    img.src="images/"+data[i].src;
                    let div=document.createElement("div");
                    div.className="content";
                    div.append(img);
                    container.append(div);
                    placeImg();
                }
            }
        }
         function sCondition(){
             var sh=document.documentElement.scrollTop;
             var vh=document.documentElement.clientHeight;
             var offsetTop=contents[contents.length-1].offsetTop+contents[contents.length-1].offsetHeight/2;
             console.log(offsetTop);
             return sh+vh>offsetTop?true:false;
         }

         function placeImg(){
             var ww=window.innerWidth;
             var cw=contents[0].offsetWidth;
             var num=Math.floor(ww/cw);
             container.style.width=num*cw+"px";
             var content_arr=Array.prototype.slice.call(contents);
             var arr_height=[];
             content_arr.forEach((element,index)=>{
                 if(index<num){
                     arr_height.push(element.offsetHeight)
                 }else{
                     var minHeight=Math.min(...arr_height);
                     var minIndex=arr_height.indexOf(minHeight);
                    var offsetLeft=content_arr[minIndex].offsetLeft;
                    content_arr[index].style.position="absolute";
                    content_arr[index].style.top=minHeight+"px";
                    content_arr[index].style.left=offsetLeft+"px";
                 }
                 arr_height[minIndex]+=content_arr[index].offsetHeight;
             })
         }
    }
    </script>
</body>
</html>